<template>
    <div>
        <p class="content-title icon-authorization">{{ title }}</p>
        <div
            class="form"
            @click="handleClick"
        >
            <slot v-if="$slots.default"></slot>
            <div
                v-else
                class="form-input"
            >
                <input
                    type="text"
                    :placeholder="placeholder"
                    :value="value"
                    disabled
                />
                <div
                    v-if="!disabled"
                    class="suffix"
                >
                    <img
                        class="arrow"
                        src=""
                        alt=""
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ContentItem',
    components: {},
    mixins: [],
    props: {
        value: {
            type: String,
            default: '',
        },
        title: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    computed: {},
    watch: {},
    mounted() {
        console.log();
    },
    methods: {
        handleClick() {
            if (this.disabled) return;
            this.$emit('on-click');
        },
    },
};
</script>

<style lang="less" scoped>
@import './form.less';
</style>

<style scoped>
p.content-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    line-height: 32px;
    color: #000;
}
p.content-title[class*='icon-']::before {
    position: absolute;
    left: -17px;
    top: 50%;
    display: block;
    transform: translateY(-50%);
    background-size: cover;
    background-repeat: no-repeat;
    content: '';
}
p.content-title.icon-authorization::before {
    width: 10px;
    height: 14px;
    background-image: url('../../assets/images/icon-authorization.png');
}
p.content-title.icon-circle::before {
    width: 9px;
    height: 9px;
    background-image: url('../../assets/images/icon-circle.png');
}
p.content-tip {
    font-size: 12px;
    line-height: 24px;
    color: #64a7ff;
}
</style>
